<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="右键菜单"> 右键菜单示例，指定元素右键显示操作菜单 </a-card>
    </div>
    <a-card :bordered="false" class="mt-3 proCard">
      <a-alert title="右键展示菜单" type="info">
        <a-dropdown trigger="contextMenu" @select="handleSelect">
          <a-button class="mt-2" type="primary" @contextmenu="handleContextMenu">右键试试</a-button>
          <template #content>
            <a-doption v-for="item in options" :key="item.key" :value="item.key">{{
              item.label
            }}</a-doption>
          </template>
        </a-dropdown>
      </a-alert>

      <a-alert title="头像组件右键展示菜单" type="info" class="mt-3">
        <a-dropdown trigger="contextMenu">
          <a-avatar :size="80">
            <img src="https://naive-ui-admin-docs.vercel.app/logo.png" />
          </a-avatar>
          <template #content>
            <a-doption v-for="item in options" :key="item.key" :value="item.key">{{
              item.label
            }}</a-doption>
          </template>
        </a-dropdown>
      </a-alert>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import {
    MailOutlined,
    AndroidOutlined,
    EllipsisOutlined,
    QqOutlined,
    WechatOutlined,
  } from '@vicons/antd';
  import { renderIcon } from '@/utils';
  const options = [
    {
      label: '发送到邮箱',
      key: 'email',
      icon: renderIcon(MailOutlined),
    },
    {
      label: '发送到手机',
      key: 'mobile',
      icon: renderIcon(AndroidOutlined),
    },
    {
      label: '其他',
      key: 'others',
      icon: renderIcon(EllipsisOutlined),
      children: [
        {
          label: 'QQ',
          key: 'qq',
          icon: renderIcon(QqOutlined),
        },
        {
          label: '微信',
          key: 'weixin',
          icon: renderIcon(WechatOutlined),
        },
      ],
    },
  ];
  const showDropdownRef = ref(false);

  const xRef = ref(0);
  const yRef = ref(0);

  function handleSelect(key) {
    showDropdownRef.value = false;
    Message.info(`您点击了，${key} 菜单`);
  }

  function handleContextMenu(e) {
    e.preventDefault();
    showDropdownRef.value = false;
    nextTick().then(() => {
      showDropdownRef.value = true;
      xRef.value = e.clientX;
      yRef.value = e.clientY;
    });
  }
</script>
